<template>
	<view class="evaluateTalk">
		<view class="talk">
			<view class="talk_t">
				<view class="author">
					<image :src="details.avatar" mode="aspectFill"></image>
					<view class="">
						<view class="author_name">{{details.realName}}</view>
						<view class="time">{{details.createTime}}</view>
					</view>
				</view>
			</view>
			<view class="talk_b">
				<!-- <view class="article_text">
					{{details.content}}
				</view> -->
				<view class="article_text" v-html="details.content">
					<!-- {{details.content}} -->
				</view>
				<view class="article_imgs" v-if="details.image && details.type==1">
					<block v-for="(img,i) in details.image?details.image.split(','):[]" :key=" img">
						<image :src="img" mode="aspectFill" @tap="previewImg(i)"></image>
					</block>
				</view>
				<view  v-if="details.type==2">
					<video :src="details.video" controls></video>
				</view>
				<view class="item_b">
					<view class="" @click="onGiveLike(details.id)">
						<uni-icons v-if="details.likeType" type="heart-filled" color="red" size="20"></uni-icons>
						<uni-icons v-if="!details.likeType" type="heart" size="20"></uni-icons>
						<text>{{details.likeNum}}</text>
					</view>
					<view class="">
						<image src="/static/forum/pinglun.png" mode=""></image>
						<text>{{details.replyNum}}</text>
					</view>
					<view>
						<button id="shareBtn" open-type="share" >
							<image src="/static/mine/fenxiang.png" mode=""></image>
							<!-- <text>{{details.shareNum}}</text> -->
						</button>
					</view>
				</view>
			</view>
		</view>
		<view class="comment_list">
			<view class="title">全部评论</view>
			<view class="list">
				<block v-for="(item,index) in list" :key="index">
					<view class="item">
						<view class="avatar">
							<image :src="item.avatar" mode="aspectFill" class="" />
						</view>
						<view class="comment_info">
							<view class="comment_top">
								<view class="">
									<view class="user_name">{{item.nickname}}</view>
									<view class="time">{{item.createTime}}</view>
								</view>
								<view class="likes" @click="onReply(item)">
									<image src="/static/forum/pinglun.png" mode=""></image>
									<text>回复</text>
								</view>
							</view>
							<view class="comment_text">
								{{item.content}}
							</view>
							<view class="sub_comment_list" v-if="item.replyList.length>0">
								<view class="">
									<block v-for="(v,i) in item.replyList.length<=2?item.replyList:item.replyList.slice(0,2)"
										:key="i">
										<view class="sub_comment_item">
											<text class="user_name">{{v.nickname}}：</text>
											<text>{{v.content}}</text>
										</view>
									</block>
								</view>
								<view class="" v-if="item.replyList.length>2&&item.isOpen">
									<block v-for="(v,i) in item.replyList.slice(2)" :key="i">
										<view class="sub_comment_item">
											<text class="user_name">{{v.nickname}}：</text>
											<text>{{v.content}}</text>
										</view>
									</block>
								</view>

								<view class="total_count" v-if="item.replyList.length>2&&!item.isOpen"
									@tap="openComment(item,index)">
									<text>共{{item.replyList.length}}条回复</text>
									<uni-icons type="right" color="#B3B3B3" size="12"></uni-icons>
								</view>
							</view>
						</view>

					</view>
				</block>
				<view style="text-align: center;" v-if="list.length==0">
					<image style="width: 200rpx;height: 200rpx;" src="/static/nodata.png"></image>
					<view style="color: #999;text-align: center;">暂无数据</view>
				</view>
				<view style="text-align: center;color: #999;margin-bottom: 50rpx;font-size: 24rpx;"
					v-if="noMoreData&&list.length!=0">
					没有更多啦
				</view>
			</view>
		</view>
		<view class="send_box" :style="'bottom:'+keyboardHeight+'rpx;'">
			<view class="input_box">
				<textarea name="" :adjust-position="false" :style="'height:'+textareaHeight+'rpx;'" v-model="content"
					@input="inputMsg" :placeholder="hintText" placeholder-style="font-size:24rpx"></textarea>
				<view class="msg_text">{{content}}</view>
			</view>
			<view class="send_btn" @click="onCommit()">发送</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commentMsg: {
					replyId: '', //回复id
					reviewId: '', //评论父id
					parentId: '', //评论id
					noteId: ''
				},
				hintText: '这里还缺一条你的优质评论',
				noMoreData: false,
				lastPage: 1,
				page: 1,
				imgList: [],
				details: {},
				id: '',
				content: '',
				textareaHeight: 74,
				keyboardHeight: 0,
				list: []
			};
		},
		onLoad(opt) {
			this.id = opt.id
			uni.onKeyboardHeightChange(res => {
				const {
					windowWidth,
					windowHeight
				} = uni.getSystemInfoSync()
				this.keyboardHeight = Math.round(res.height * (750 / windowWidth))
			})
			this.getDetails()
			this.getCommentList()
		},
		onReachBottom() {
			if (this.page < this.lastPage) {
				this.page += 1
				this.getCommentList()
			} else {
				this.noMoreData = true
			}
		},
		onShareAppMessage(res) {
			console.log('厨房了')
			if (res.from === 'button') {
				let path = `/pages/forum/evaluaTetrends/evaluaTetrends?id=${this.id}`
				return {
					title: this.details.content,
					path: path,
				};
			}
			if (res.from === 'menu') {
				return {
					title: '研学说',
					path: `/pages/forum/evaluaTetrends/evaluaTetrends?id=${this.id}`,
				};
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: '研学说',
				path: `/pages/forum/evaluaTetrends/evaluaTetrends?id=${this.id}`,
			};
		},
		methods: {
			async onGiveLike(id) {
				const res = await this.$api.post(`community/note/like/${id}`, {});
				console.log(res, "点赞")
				if (res.code == 200) {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					setTimeout(() => {
						this.getDetails()
					}, 500)
				}
			},
			// 发布评论
			async onCommit() {
				if (!this.content) {
					uni.showToast({
						title: '评论内容不能为空',
						icon: 'none'
					})
					return false;
				} else {
					this.postComment()
				}
			},
			onReply(item) {
				this.content = ''
				this.hintText = `回复: ${item.nickname}`
				this.commentMsg = {
					parentUid: item.uid,
					reviewId: item.id, //评论父id 
					parentId: item.id, //如果多级评论能拿到

				}
			},
			// 发表评论
			async postComment() {
				// console.log({
				// 	...this.commentMsg,
				// 	content: this.content,
				// 	type: 1
				// })
				const res = await this.$api.post(`community/note/reply/add`, {
					...this.commentMsg,
					content: this.content,
					type: 1,
					noteId: this.id
				});
				console.log(res, "回复评论")
				if (res.code == 200) {
					uni.showToast({
						title: '发送成功，审核后即可展示~',
						icon: 'none'
					})
					this.page = 1
					this.noMoreData = false
					this.hintText = '这里还缺一条你的优质评论',
					this.content = ''
					this.commentMsg = {}
					// setTimeout(() => {
					// 	this.getDetails()
					// 	this.getCommentList()
					// }, 500)
				}
			},
			// 评论列表
			async getCommentList() {
				//1文章 2话题
				const res = await this.$api.get(`community/note/reply/list/${this.id}/1`, {
					limit: 20,
					page: this.page,
				});
				console.log(res, "评论详情")
				if (res.code == 200) {
					const {
						list,
						totalPage
					} = res.data
					if (this.page == 1) {
						const dataList = list.map((item, i) => {
							return {
								...item,
								isOpen: false
							}
						})
						this.list = dataList || [];
						this.lastPage = totalPage || 1;
					} else {
						this.list.push(...dataList);
					}
					this.page != 1 && list.length == 0 ? this.noMoreData = true : this.noMoreData = false
				}
			},

			getImg(imgs) {
				const imgLisit = imgs.split(',')
				this.imgList = imgs.split(',')
				return imgs.split(',')
			},
			async getDetails() {
				const res = await this.$api.get(`ebTrusteeshipCourse/evaluation`, {
					id: this.id,
					type: 2, //1-托管 2-研学 3-党史
				});
				console.log(res, "动态详情")
				if (res.code == 200) {
					var str = res.data.content;
					// str = str.replace(/http:\/\/ydjxb.dgqmkj.site:8082\/http:\/\/ydjxb.dgqmkj.site:8082/g, 'http://ydjxb.dgqmkj.site:8082');
					str = str.replace(/wscnph/g, 'wscnph maxImg');
					str = str.replace(/<img/g, '<img style="max-width:100% !important;height:auto;"');
					res.data.content = str;
					this.details = res.data;
					if(res.data && res.data.image) {
						this.imgList = res.data.image?.split(',')
					}
				}
			},
			inputMsg() {
				var timer = setTimeout(() => {
					this.$nextTick(() => {
						uni.createSelectorQuery().select('.msg_text').boundingClientRect(res => {
							this.textareaHeight = Math.round(res.height * (750 / res.width));
						}).exec();
					})
					clearTimeout(timer)
				}, 500)
			},
			previewImg(current) {
				uni.previewImage({
					current,
					urls: this.imgList,
				});
			},
			openComment(item, index) {
				this.$set(this.list[index], 'isOpen', true)
			}
		}
	}
</script>

<style lang="scss">
	p {
		text-indent: 2em;
	}
	.maxImg {
		width: 100%;
		max-width:100% !important;
		height:auto;
	}
	#shareBtn {
		background: #fff;
		border: none;
		
	}
	button::after{
	 	border: none;
	}

	.item_b {
		margin-top: 30rpx;
		font-size: 24rpx;
		color: #999999;
		line-height: 24rpx;
		display: flex;
		justify-content: space-between;

		>view {
			display: flex;
			align-items: center;

			image {
				width: 34rpx;
				height: 34rpx;
			}

			text {
				font-size: 24rpx;
				margin-left: 12rpx;
			}
		}

		.read_count {
			color: #999999;
			font-size: 24rpx;
		}
	}

	video {
		width: 100%;
		height: 400rpx;
	}

	.evaluateTalk {
		.talk {
			padding: 26rpx 54rpx 40rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background-color: #fff;
			border-bottom: 20rpx solid #F7F7F7;

			.talk_t {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.author {
					display: flex;
					align-items: center;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 14rpx;
						background-color: #F7F7F7;
					}

					.author_name {
						font-size: 30rpx;
						line-height: 30rpx;
						font-weight: bold;
						margin-bottom: 14rpx;
					}

					.time {
						font-size: 24rpx;
						line-height: 24rpx;
						color: #B3B3B3;
					}
				}
			}

			.talk_b {
				.article_text {
					font-size: 26rpx;
					line-height: 40rpx;
					margin-bottom: 16rpx;
					word-wrap: break-word;
					word-break: break-all;
				}

				.article_imgs {
					display: grid;
					grid-template-columns: repeat(3,1fr);
					// grid-gap: 30rpx;
					image {
						width: 206rpx;
						height: 200rpx;
						border-radius: 20rpx;
						margin-top: 12rpx;
					}

					image:not(:last-child) {
						// margin-right: 12rpx;
					}
				}
			}
		}

		.comment_list {
			padding: 40rpx 54rpx 120rpx;
			box-sizing: border-box;

			.title {
				font-size: 26rpx;
				font-weight: bold;
				margin-bottom: 48rpx;
			}

			.list {
				.item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 60rpx;

					.avatar {
						image {
							width: 66rpx;
							height: 66rpx;
							border-radius: 50%;
							background-color: #F5F5F5;
						}
					}

					.comment_info {
						flex: 1;
						margin-left: 20rpx;

						.comment_top {
							display: flex;
							justify-content: space-between;

							.user_name {
								font-size: 26rpx;
								line-height: 30rpx;
							}

							.time {
								font-size: 20rpx;
								line-height: 20rpx;
								color: #B3B3B3;
								padding: 10rpx 0;
							}

							.likes {
								padding-top: 34rpx;
								display: flex;
								align-items: center;

								image {
									width: 34rpx;
									height: 32rpx;
								}

								>text {
									font-size: 26rpx;
									line-height: 26rpx;
									margin-left: 10rpx;
								}
							}
						}

						.comment_text {
							font-size: 26rpx;
							line-height: 32rpx;
							margin-bottom: 22rpx;
						}

						.sub_comment_list {
							width: 100%;
							background-color: #F5F5F5;
							padding: 20rpx 18rpx;
							box-sizing: border-box;
							border-radius: 6rpx;

							.sub_comment_item {
								font-size: 24rpx;
								line-height: 32rpx;

								.user_name {
									color: #F5445A;
								}
							}

							.sub_comment_item:not(:last-child) {
								// margin-bottom: 28rpx;
							}

							.total_count {
								display: flex;
								align-items: center;
								padding: 6rpx 0;
								font-size: 24rpx;
								color: #999;

								>text {
									margin-right: 10rpx;
								}
							}
						}
					}


				}
			}
		}

		.send_box {
			width: 100%;
			padding: 20rpx 26rpx 40rpx;
			box-sizing: border-box;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 5;

			.input_box {
				width: 534rpx;
				min-height: 74rpx;
				position: relative;
				background-color: #F5F5F5;
				border-radius: 14rpx;

				textarea {
					width: 534rpx;
					min-height: 74rpx;
					padding: 16rpx 20rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					line-height: 30rpx;
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					z-index: 9;
				}

				.msg_text {
					width: 534rpx;
					min-height: 74rpx;
					padding: 16rpx 20rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					line-height: 30rpx;
					opacity: 0;
				}
			}

			.send_btn {
				width: 130rpx;
				height: 74rpx;
				border-radius: 14rpx;
				text-align: center;
				line-height: 74rpx;
				background-color: #2E80FE;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
	}
</style>